<template>
  <div id="app">
    <h1 ref="hello" id="hello">{{ message }}</h1>
    <button @click="changeMsg">change</button>
    <child :data="1"></child>
  </div>
</template>

<script>
// 被替换
// beforeCreate -> setup()
// created -> setup()
// 重命名
// beforeMount -> onBeforeMount
// mounted -> onMounted
// beforeUpdate -> onBeforeUpdate
// updated -> onUpdated
// beforeDestroy -> onBeforeUnmount
// destroyed -> onUnmounted
// errorCaptured -> onErrorCaptured
// 新增的
// 新增的以下2个方便调试 debug 的回调钩子：
// onRenderTracked
// onRenderTriggered
import {ref} from "vue";

import Child from '@/components/ChildComponent/index'

export default {
  name: "index",
  components: {
    Child
  },
  setup() {
    const message = ref('hello world')
    const changeMsg = () => {
      console.log('java')
    }
    return {
      message,
      changeMsg
    }
  }
}
</script>

<style scoped>

</style>
